<!DOCTYPE html>
<html>
<head>
	<title>border animation effect</title>
	<meta charset="utf-8" />
	<style type="text/css">
		body {
		    background: #f9f7f6;
		    color: #404d5b;
		    font-weight: 500;
		    font-size: 1.05em;
		    font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif;
		}
		*, *::before, *::after {
		    box-sizing: border-box;
		}
		default.css:32
		*, *:after, *:before {
		    -webkit-box-sizing: border-box;
		    -moz-box-sizing: border-box;
		    box-sizing: border-box;
		}

		.bb {
		    width: 200px;
		    height: 200px;
		    margin: auto;
		    /* background: url(img/Button-White-Large.png) no-repeat 50%/70% rgba(0, 0, 0, 0.1); */
		    color: #69ca62;
		    box-shadow: inset 0 0 0 1px rgba(105, 202, 98, 0.5); 
		}
		.bb, .bb::before, .bb::after {
		    position: absolute;
		    top: 0;
		    bottom: 0;
		    left: 0;
		    right: 0;
		}
		.bb:hover::after, .bb:hover::before {
		    background-color: rgba(255, 0, 0, 0.3);
		}
		.bb::before, .bb::after {
		    content: '';
		    z-index: -1;
		    margin: -5%;
		    box-shadow: inset 0 0 0 2px;
		    animation: clipMe 8s linear infinite;
		}
		.bb::before{
			animation-delay: -4s;
		}
		.bb, .bb::before, .bb::after {
		    position: absolute;
		    top: 0;
		    bottom: 0;
		    left: 0;
		    right: 0;
		}
		@keyframes clipMe{
			0%, 100%{
				clip: rect(0px, 220px, 2px, 0px);
			}
			25%{
				clip: rect(0px, 2px, 220px, 0px);
			}
			50%{
				clip: rect(218px, 220px, 220px, 0px);
			}
			75%{
				clip: rect(0px, 220px, 220px, 218px);
			}


		}

	</style>
</head>
<body>

	<div class="bb"></div>

</body>
</html>